<template>
	<scroll-view scroll-y="true" style="height: 100%" >
		<u-radio-group
			v-if="address.length != 0"
			v-model="id"
		    placement="column">
			<view class="address_item" v-for="item in address" :key="item._id">
				<u-radio activeColor="rgb(31, 182, 131)" :name="item._id" @change="changeRadio(item._id)"></u-radio>
				<view class="center" @click="setDefAddress(item._id)">
					<view class="info">
						<text class="name" style="margin-right: 20rpx;">{{item.name}}</text>
						<text class="tel">{{item.mobile}}</text>
					</view>
					<text class="address">{{item.province+item.city+item.detail}}</text>
				</view>
				<text class="iconfont icon-bianji" v-if="!handleStatus" @click="updateAddress(item)"></text>
				<text class="iconfont icon-shanchu" v-else @click="deleteAddress(item._id)"></text>
			</view>
		</u-radio-group>
		<view class="btnWrap">
			<u-button height="80" type="success" text="添加收货地址" @click="toAddAddress"></u-button>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props:{
			handleStatus:{
				tyep:Boolean,
				default:false
			}
		},
		data() {
			return {
				id:'',
				address:[]
			}
		},
		computed: {
			token() {
				return this.$store.state.auth.token
			}
		},
		watch:{
			token(){
				this.getAddress()
			}
		},
		mounted(){
			this.getAddress()
		},
		methods:{
			async getAddress(){
				const {code,data} = await this.$axios.api.getAddress()
				if(code === 200){
					this.address = data.reverse()
					const defaultAddress = this.address.find(item=>{
						return item.selectDefault === true
					})
					if(typeof defaultAddress !== 'undefined'&& defaultAddress !== null){
						this.$store.commit('setAddress', defaultAddress)
					}else{
						this.$store.commit('setAddress', {})
					}
					this.address.forEach((item,index)=>{
						if(item.selectDefault === true){
							this.id = item._id
						}
					})
				}
			},
			changeRadio(aid){
				this.setDefAddress(aid)
			},
			setDefAddress(aid){
				const this_ = this
				uni.showModal({
					title:'提示',
					content:'将该地址设置为默认地址吗？',
					success(res){
						if(res.confirm){
							this_.$axios.api.changeDefault({
								aid,
								selectDefault: true
							}).then(res=>{
								if(res.code === 200){
									uni.showToast({
									  icon: 'success',
									  title: '设置成功',
									  duration: 2000
									})
									this_.getAddress()
								}
							})
						}
					}
				})
			},
			deleteAddress(aid){
				const this_ = this
				uni.showModal({
					title:'提示',
					content:'确定要删除该地址吗？',
					success(res){
						if(res.confirm){
							this_.$axios.api.deleteAddress({
								aid
							}).then(res=>{
								if(res.code === 200){
									uni.showToast({
									  icon: 'success',
									  title: '删除成功',
									  duration: 2000
									})
									this_.getAddress()
								}
							})
						}
					}
				})
			},
			toAddAddress(){
				uni.navigateTo({
					url:'/subcom-my/Address/Add-address'
				})
			},
			updateAddress(item){
				uni.navigateTo({
					url: `/subcom-my/Address/Add-address?address=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address_item{
		height: 160rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&:last-child{
			margin-bottom: 80rpx;
		}
		.center{
			height: 120rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.info,.address{
				line-height: 60rpx;
			}
		}
	}
	.btnWrap{
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>
